<style>
  input.ng-dirty.ng-invalid { border: 2px solid #ff0000 }
  input.ng-dirty.ng-valid { border: 2px solid #6bc502 }
</style>

<div class="row m-2">
  <div class="col-6">
    <form class="m-2" novalidate (ngSubmit)="submitForm()">
      <div class="form-group">
          <label>Name</label>
          <input class="form-control" name="name" [(ngModel)]="newProduct.name" />
      </div>
      <div class="form-group">
        <label>Category</label>
        <input class="form-control" name="category"
            [(ngModel)]="newProduct.category" />
      </div>
      <div class="form-group">
        <label>Price</label>
        <input class="form-control" name="price" [(ngModel)]="newProduct.price" />
      </div>
      <button class="btn btn-primary" type="submit">Create</button>
    </form>
  </div>

  <div class="col-6">

    <div class="form-group bg-info text-white p-2">
      <label>Name:</label>
      <input class="bg-primary text-white" [(paModel)]="newProduct.name"
          #paModel="paModel" />
      <div class="bg-primary text-white">Direction: {{paModel.direction}}</div>
  </div>


    <table class="table table-sm table-bordered table-striped">
      <tr><th></th><th>Name</th><th>Category</th><th>Price</th></tr>
      <tr *ngFor="let item of getProducts(); let i = index"
              [pa-attr]="getProducts().length < 6 ? 'bg-success' : 'bg-warning'"
              [pa-product]="item" (pa-category)="newProduct.category = $event">
          <td>{{i + 1}}</td>
          <td>{{item.name}}</td>
          <td [pa-attr]="item.category == 'Soccer' ? 'bg-info' : null">
              {{item.category}}
          </td>
          <td [pa-attr]="'bg-info'">{{item.price}}</td>
      </tr>
  </table>



  </div>
</div>
